<template>
    <div class="film-item">
      <div class="film-item__left">
        <img class="film-poster" :src="data.poster" alt="" />
      </div>
      <div class="film-item__body">
        <p class="film-info film-name">{{ data.name }}</p>
        <p class="film-info">观众评分<em>7.7</em></p>
        <p class="film-info">主演：xxxx xxxx xxx</p>
        <p class="film-info">中国大陆 | 119分钟</p>
      </div>
      <div class="film-item__right"></div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { type Film } from '@/api/interface'
  
  defineProps<{
    data: Film.Item
  }>()
  </script>
  

<style lang="scss" scoped>
.film-item {
  position: relative;
  display: flex;
  padding: 15px 15px 15px 0;
  height: 94px;
  position: relative;
  background-color: honeydew;

  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: red;
    transform: scaleY(0.5);
  }

  &__left {
    width: 66px;
    height: 94px;
    background: rgb(249, 249, 249);
  }

  &__body {
    padding: 0 10px;
    flex: 1;
    overflow: hidden;
  }

  .film-poster {
    display: block;
    width: 100%;
    height: 100%;
  }

  .film-info {
    margin: 0;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
  }

  .film-name {
    font-size: 18px;
  }
}
</style>